<template>
    <div class="Historytimetable">
        <div class="Historytimetable-head">
            <label>
                <span>历史课程</span>
            </label>
            <label class="Timersvalues">
                <el-date-picker v-model="Timersvalue" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions1"></el-date-picker>
            </label>
            <label class="screenings">
                <span @click="shaixuan">筛选</span>
            </label>
        </div>
        <div class="Historytimetable-content">
            <div class="Historytimetable-content-nav">
                <ul>
                    <li v-for="(item,index) in TeachcourseNavList" :key="index" @click="Tabescelect(index)" :class="TeachcourseNavListIndex ==index?'navelecet':''">{{item}}</li>
                </ul>
            </div>
            <div class="Historytimetable-content-content" v-if="TeachcourseNavListIndex==0">
                <div class="Historytimetable-class-List">
                    <ul v-if="TeachcourseInfoList.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无已结束课程</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in TeachcourseInfoList" :key="index" @click="ToDetial(item)">
                            <div class="Historytimetable-class-List-content">
                                <label>
                                    <img :src="item.cover" alt="">
                                </label>
                                <label class="Historytimetable-class-Info">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.title}}</span>
                                    </label>
                                    <label class="Historytimetable-class-Infos">
                                        <span>参与人数</span>
                                        <span>{{item.connect_peoplenum}}</span>
                                    </label>
                                    <label>
                                        <span>评论</span>
                                        <span>{{item.map.commentCoumt}}</span>
                                    </label>
                                    <label>
                                        <span>收益</span>
                                        <span>{{item.map.profit}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="Historytimetable-content-content" v-else-if="TeachcourseNavListIndex==1">
                <div class="Historytimetable-class-List">
                    <ul v-if="crossborderHlep.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无已结束课程</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in crossborderHlep" :key="index">
                           <div class="Historytimetable-class-List-content">
                                <label>
                                    <img :src="item.map.userinfo.avatar" alt="" style="max-width: 80%;">
                                </label>
                                <label class="Historytimetable-class-Info" style="height:70%">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.title}}</span>
                                    </label>
                                     <label>
                                        <img src="/images/椭圆 30 拷贝@2x.png" alt="" class="PersonaltrainingLis-cover">
                                        <span>{{item.map.userinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.times}}</span>
                                        <span>{{item.starttime}}-{{item.endtime}}</span>
                                    </label>
                                     <label class="PersonaltrainingList-operation">
                                        <!-- <span>总结</span> -->
                                        <span>评论</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="Historytimetable-content-content" v-else-if="TeachcourseNavListIndex==2">
                <div class="Historytimetable-class-List">
                    <ul v-if="crossborderHlep.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无已结束课程</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in crossborderHlep" :key="index">
                           <div class="Historytimetable-class-List-content">
                                <label>
                                    <img :src="item.map.userinfo.avatar" alt="" style="max-width: 80%;">
                                </label>
                                <label class="Historytimetable-class-Info" style="height:70%">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.title}}</span>
                                    </label>
                                     <label>
                                        <img src="/images/椭圆 30 拷贝@2x.png" alt="" class="PersonaltrainingLis-cover">
                                        <span>{{item.map.userinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.times}}</span>
                                        <span>{{item.starttime}}-{{item.endtime}}</span>
                                    </label>
                                     <label class="PersonaltrainingList-operation">
                                        <span>总结</span>
                                        <span>评论</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="Historytimetable-content-content" v-else-if="TeachcourseNavListIndex==3">
                <div class="Historytimetable-class-List">
                    <ul v-if="crossborderHlep.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无已结束课程</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in crossborderHlep" :key="index">
                           <div class="Historytimetable-class-List-content">
                                <label>
                                    <img :src="item.map.userinfo.avatar" alt="" style="max-width: 80%;">
                                </label>
                                <label class="Historytimetable-class-Info" style="height:70%">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.title}}</span>
                                    </label>
                                     <label>
                                        <img src="/images/椭圆 30 拷贝@2x.png" alt="" class="PersonaltrainingLis-cover">
                                        <span>{{item.map.userinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.times}}</span>
                                        <span>{{item.starttime}}-{{item.endtime}}</span>
                                    </label>
                                     <label class="PersonaltrainingList-operation">
                                        <span>总结</span>
                                        <span>评论</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="Historytimetable-content-content" v-else-if="TeachcourseNavListIndex==4">
                <div class="Historytimetable-class-List">
                    <ul v-if="crossborderHlep.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无已结束课程</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in crossborderHlep" :key="index">
                           <div class="Historytimetable-class-List-content">
                                <label>
                                    <img :src="item.map.userinfo.avatar" alt="" style="max-width: 80%;">
                                </label>
                                <label class="Historytimetable-class-Info" style="height:70%">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.title}}</span>
                                    </label>
                                     <label>
                                        <img src="/images/椭圆 30 拷贝@2x.png" alt="" class="PersonaltrainingLis-cover">
                                        <span>{{item.map.userinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.times}}</span>
                                        <span>{{item.starttime}}-{{item.endtime}}</span>
                                    </label>
                                     <label class="PersonaltrainingList-operation">
                                        <span>总结</span>
                                        <span>评论</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="Lvie-cl-de-con-pagination">
            <el-pagination background layout="prev, pager, next" :page-size="8" :total="total" :currentPage='currentPage' @current-change="handleCurrentChange"></el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    name:'Historytimetable',
    data(){
        return{
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                },
            },
            Timersvalue:new Date,
            TeachcourseNavList:['直播课堂讲师','私教','跨境助学师','母语助学师','专业助学师'],
            TeachcourseNavListIndex:'',
            TeachcourseInfoList:[],
            total:100,
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            crossborderHlep:[
                {
                    avater:'/images/图层 9.png',
                    title:'交流/学习教育',
                    nick_name:'SexSex',
                    times:'2020-05-28',
                    data:'14:00-14:30'
                }
            ],
            currentPage:1,
            
        }
    },
    created(){
        this.GetHistorytimetable()
    },
    methods: {
        shaixuan(){//根据时间筛选没接口
            console.log(this.Timersvalue)
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.GetHistorytimetable()
        },
        Tabescelect(e){//选项卡切换
            this.TeachcourseNavListIndex = e
            this.handleCurrentChange(1)
            this.currentPage = 1
            if(this.TeachcourseNavListIndex == 0){
                this.GetHistorytimetable()
            }else{
                this.GetHistoryteacher()
            }
        },
        GetHistorytimetable(){//获取历史课程表
            var data ={
                currentPage:this.currentPage,
                pageSize:8,
                type:"open_class",
                master_id:this.unserinfo.user_id
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryHistoryListPage',
                params:data,
                }).then((res) =>{
                    this.TeachcourseInfoList = res.data.data
                    this.TeachcourseInfoList.forEach(e=>{
                        var stars = e.start_time
                        var entimes = e.end_time
                        console.log(stars,'wiw')
                        var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                        var starttime =  stars.substring(11, 16)//截取开始时间
                        var endtime =  entimes.substring(11, 16)//截取结束时间
                        var myDate = new Date(Date.parse(times));  
                        e['create_time'] = times
                        e['start_time'] = starttime
                        e['end_time'] = endtime
                    })
                    console.log(this.TeachcourseInfoList,'我')
                }).catch((error) =>{
                    console.log(error)
            })
        },
        GetHistoryteacher(){
            var data ={
                currentPage:this.currentPage,
                pageSize:8,
                type:"single_class",
                master_id:this.unserinfo.user_id
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userAppointment/queryHistoryListPage',
                params:data,
                }).then((res) =>{
                    console.log(res.data.data,'助学师历史课程')
                    this.crossborderHlep = res.data.data
                    this.crossborderHlep.forEach(e=>{
                        var stars = e.start_time
                        var entimes = e.end_time
                        console.log(stars,'wiw')
                        var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                        var starttime =  stars.substring(11, 16)//截取开始时间
                        var endtime =  entimes.substring(11, 16)//截取结束时间
                        var myDate = new Date(Date.parse(times));  
                        e.times = times
                        e.starttime = starttime
                        e.endtime = endtime
                    })
                }).catch((error) =>{
                    console.log(error)
            })
        },
        ToDetial(item){
            console.log(item)
            this.$router.push({path:'/views/Teachingcenters/Teachingcentercoursedetails',query: {id: item.id,Isend:true}})
        }
    }
}
</script>
<style lang="less" scoped>
    .Historytimetable{
        position: relative;
        width: 100%;
        border-radius: 20px;
        min-height: 1041px;
        background: #ffffff;
        height: auto;
    }
    /*头部样式*/
    .Historytimetable-head{
        position: relative;
        width: 90%;
        height: 80px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #2DC7C8;
        label{
            height: 30px;
            &:first-child{
                width: 12%;
                height: 20px;
                color: #2DC7C8;
                font-weight: bold;
                border-left: 8px solid #2DC7C8;
                padding-left: 1%;
            }
        }
    }
    .Timersvalues{
        width: 44%;
        margin-left: 34%;
        /deep/.el-range-editor{
            width: 100%;
            height: 30px;
            border-radius: 15px;
            border: 1px solid #47CECF;
            /deep/.el-range-separator{
                line-height: 22px;
            }
            /deep/.el-range__icon{
                line-height: 22px;
            }
            /deep/.el-range__close-icon{
                display: none;
            }
        }
    }
    .screenings{
        width: 10%;
        padding-left: 2%;
        span{
            display: inline-block;
            width: 100%;
            height: 30px;
            background:rgba(71,206,207,1);
            border-radius:15px;
            line-height: 30px;
            color: #ffffff;
            text-align: center;
            cursor: pointer;
        }
    }
    /*内容样式*/
    .Historytimetable-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
    }
    /*tabs选项卡切换*/
    .Historytimetable-content-nav{
        position: relative;
        width: 100%;
        height: 50px;
        ul{
            display: flex;
            list-style: none;
            height: 50px;
            align-items: center;
            justify-content: flex-end;
            padding: 0;
            li{
                height: 50px;
                line-height: 50px;
                border:1px solid transparent;//解决点击选中后变形问题
                text-align: center;
                cursor: pointer;
                margin-left: 40px;
            }
        }
    }
    .navelecet{
        color: #2DC7C8;
        border-bottom: 2px solid #2DC7C8!important;
    }
    /*列表样式*/
    .Historytimetable-class-List{
        position: relative;
        width: 100%;
        padding-bottom: 40px;
        ul{
            display: flex;
            width: 100%;
            list-style: none;
            padding: 0;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                width: 48%;
                height: 200px;
                border:1px solid rgba(54,205,206,1);
                border-radius:5px;
                margin-top: 20px;
                cursor: pointer;
            }
        }
    }
    .Historytimetable-class-List-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        height: 100%;
        align-items: center;
    }
    .Historytimetable-class-List-content>label:first-child{
        width: 50%;
        border-radius: 15px;
        height: 80%;
        overflow: hidden;
        img{
            width: auto;
            height: auto;
            max-width: 100%;
        }
    }
    .Historytimetable-class-Info{
        width: 50%;
        height: 90%; 
        padding-left: 6%;
        label{
            display: flex;
            // justify-content: space-between;
            font-size: 14px;
            height: 24px;
            line-height: 24px;
            margin-top: 8px;
            span{
                display: inline-block;
                width: auto;
                &:first-child{
                    width: auto;
                }
                &:last-child{
                    margin-left: 4%;
                }
            }
        }
    }
    .Historytimetable-class-Info>.Historytimetable-class-Infos{
        margin-top: 10px;
        
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }
    .Personalschedule-class-info-head{
        span{
            width: 100%!important;
            overflow: hidden;
            color: #555555;
            font-size: 18px;
            font-weight: bold;
            margin: 0 auto!important;
        }
    }
    .PersonaltrainingList-operation{
        margin-left: auto;
        span{
            color: #2DC7C8;
            cursor: pointer;
        }
    }
    .PersonaltrainingLis-cover{
        width: auto;
        height: 70%;
        max-width: 60%;
        margin-top: 3%;
    }
    .nodates{
        position: relative;
        width: 100%;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        label{
            width: 100%;
            text-align: center;
            flex-wrap: wrap;
            img{
                width: 63px;
                height: 51px;
            }
        }
        span{
            display: inline-block;
            width: 100%;
            color: #e7e7e7;
            margin-top: 10px;
        }
    }
</style>